<template>
	<view>
		<view class="page">
			<NavBar></NavBar>
			<ScrollView
				:contentHeight="contentHeight"
			 >
				<template #content>
					<view class="search-box">
						<searchBox></searchBox>
					</view>
					<view class="banner-box">
						<banner :bannerList="bannerList"></banner>
					</view>
					<view class="m-t-30">
						<IdentityBox :list="identity" />
					</view>
					<view class="m-t-30">
						<NavList :list="navList" />
					</view>
					<view class="m-t-30">
						<ServiceBox />
					</view>
					<view class="m-t-30" v-for = "(item ,index) in categoryList">
						<NavTitle :titleObj="{ title: categoryList[index].name, path:'/pages/accompany-tmp/index/shopService/shopService' }"></NavTitle>
						<view  v-for="itemSe in serviceList[index].list" v-if="serviceList[index] !== undefined" >
							<ServiceItem :dataItem = "itemSe"/>
						</view>
						<view v-else>
							<ServiceItem :dataItem = "{}"/>
						</view>
						
					</view>
				<!-- 	<view class="m-t-30">
						<NavTitle :titleObj="{ title: '打针套餐', path:'/pages/accompany-tmp/index/shopMealList/shopMealList' }"></NavTitle>
						<view class="m-t-20">
							<MealScroll />
						</view>
					</view> -->
				<!-- 	<view class="m-t-30">
						<NavTitle :titleObj="{ title: '置管护理', path:'' }"></NavTitle>
						<ServiceItem />
					</view>
					<view class="m-t-40">
						<NavTitle :titleObj="{ title: '母婴服务', path:'' }"></NavTitle>
						<view class="m-t-30">
							<MealScroll type="service" />
						</view>
					</view>
					<view class="m-t-40">
						<NavTitle :titleObj="{ title: '资讯', path:'' }"></NavTitle>
						<view class="m-t-30">
							<MealScroll type="info" />
						</view>
					</view>
					<view class="m-t-40">
						<NavTitle :titleObj="{ title: '附近商家', path:'/pages/accompany-tmp/index/shopList/shopList' }"></NavTitle>
						<ShopItem />
					</view> -->
				</template>
			 </ScrollView>		
			<bottom type="accompany" :tabIndex="0"></bottom>
		</view>
	</view>
</template>

<script setup lang="ts">
	import NavBar from '@/components/accompany/navBar/index.vue';
	import ScrollView from '@/components/accompany/scrollView/scrollView.vue';
	import searchBox from '@/components/house/tabbar/index/searchBox/search-box.vue';
	import IdentityBox from '@/components/identityBox/index.vue';
	import NavList from '@/components/accompany/tabbar/index/navList/index.vue';
	import ServiceBox from '@/components/accompany/tabbar/index/serviceBox/index.vue';
	import NavTitle from '@/components/accompany/navTitle/navTitle.vue';
	import ServiceItem from '@/components/accompany/serviceItem/index.vue';
	import MealScroll from '@/components/accompany/tabbar/index/mealScroll/index.vue';
	import ShopItem from '@/components/accompany/tabbar/index/shopItem/index.vue';
	import banner from '@/components/house/tabbar/index/banner/banner.vue';
	import { navList } from '@/config/config'
	import bottom from '@/components/footer/footer.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref,reactive,toRefs, } from 'vue';
	import type { Ref } from 'vue'
	import api from '@/providers/API/api.js'
	import requestHttp from '@/providers/essential/httpService.js'
	const categoryList = ref([]);
	const bannerList = ref([]);
	const serviceList = ref([]);
	const  identity = ref([
		{ label: '平台监管' },
		{ label: '认证商户' },
		{ label: '优质服务' },
		{ label: '极速维权' }
	])
	
				
	const contentHeight:Ref<number> = ref(0)
	
	
	function getcategoryList(){
		let url = api.getcategoryList
		let param = {
		}
		console.log(api.getcategoryList, 'getServiceManage')
		requestHttp.getData(url, param).then((res) => {
			console.log(res, 'res')
			if (res.code == 0) {
				categoryList.value = res.data
				getServiceAll()
			} else if (res.msg) {
				uni.showToast({
					title: res.msg, //显示的文字 
				})
			
			}
			
		})
	}
	
	let i = 0
	function getServiceAll(){
		console.log(categoryList,'cate')
		if(i >= categoryList._rawValue.length ){
			return
		}
		let url = api.getServiceList
		let param = {
			pageNo:1,
			pageSize:10,
			categoryId:categoryList._rawValue[i].id
			
		}
		requestHttp.getData(url, param).then((res) => {
			console.log(res, 'res2222')
			if (res.code == 0) {
				if(res.data.list.length !== 0){
					let serviceListSuffer = {
						title:categoryList._rawValue[i].name,
						list:res.data.list
					}
					serviceList.value.push(serviceListSuffer)
				}
				i++;
				getServiceAll()	
				console.log(serviceList,'service')
			} else if (res.msg) {
				uni.showToast({
					title: res.msg, //显示的文字 
				})
					
			}			
		})					
	}
		
	onLoad(() => {
		uni.request({
			url:'https://scrm.caomei.zone/magic/web/pz/banner/list',
			method: 'GET',
			success: function(res) {
			    var data = res.data;
			      if (data.code === 1 && data.data.length > 0) {
			        var images = data.data; // 假设接口返回的图片数组保存在变量images中
			        for (var i = 0; i < images.length; i++) {
			          var picUrl = images[i].pic_url;
			          bannerList.value.push(picUrl); // 将picUrl添加到bannerList.value中
			        }
			        console.log(bannerList.value); // 输出bannerList.value，包含了所有图片URL
			      }
			  },
			  fail: function(err) {
			    console.error(err); // 请求失败时的处理
			  }
		})
		console.log('onLoad')
		let sysInfo = uni.getStorageSync('sysInfo')
		contentHeight.value = sysInfo.screenHeight - sysInfo.statusBarHeight - 94
		console.log(contentHeight)
		getcategoryList()
	})
	// function getAssetsimages (name) {
	// 	return new URL(name, import.meta.url).href
	// }
</script>

<style lang="scss">
	.page{
		padding: 0 mp-sizing(10);
	}
	.search-box {
		margin-top: 30rpx;
	}
	.banner-box {
		margin-top: 20rpx;
	}
	.looking{
		width: 100%;
		height: mp-sizing(160);
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		.left{
			width: 48%;
			height: 100%;
			.item{
				width: 100%;
				height: 100%;
				background-color: $uni-bg-color-grey;
				box-sizing: border-box;
				padding: mp-sizing(10);
				display: flex;
				flex-flow: column wrap;
				justify-content: space-around;
				.title{
					font-weight: 600;
				}
				.text{
					color: $uni-text-color-grey;
				}
				.btn{
					width: mp-sizing(100);
					text-align: center;
					margin: 0;
					background-color: $uni-color-primary;
					padding: mp-sizing(5);
					color: $uni-text-color-inverse;
					font-size: mp-sizing(14);
				}
			}
		}
		.right{
			width: 48%;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			.item{
				background-color: $uni-bg-color-grey;
				box-sizing: border-box;
				padding: mp-sizing(10);
				display: flex;
				flex-flow: column wrap;
				justify-content: space-around;
				.title{
					font-weight: 600;
				}
				.text{
					color: $uni-text-color-grey;
				}
			}
			.village,.map{
				height: 48%;
				width: 100%;
			}
		}
	}
</style>
